<template>
  <div class="left_page_style">
    <div class="icon_style"></div>
    <a-menu
      class="menu_style"
      mode="inline"
      theme="dark"
      :selectedKeys="nowSiderId"
      :openKeys="nowOpenKeys"
    >
      <template v-for="item in menuList">
        <a-menu-item
          :key="item.menuId"
          v-if="!item.children.length"
          @click="goPage(item.menuUrl)"
        >
          <span>{{ item.menuName }}</span>
        </a-menu-item>
        <a-sub-menu :key="item.menuId" v-else>
          <span slot="title">
            <a-icon :type="item.icon" />
            <span>{{ item.menuName }}</span>
          </span>
          <a-menu-item
            v-for="item2 in item.children"
            :key="item2.menuId"
            @click="goPage(item2.menuUrl)"
          >
            <span>{{ item2.menuName }} </span>
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { MENU } from "./menu";
export default {
  name: "pageSider",
  data() {
    return {
      menuList: MENU,
      nowSiderId: [],
      nowOpenKeys: [],
    };
  },
  watch: {
    $route(val) {
      this.selectPath(val.path);
    },
  },
  created() {
    this.selectPath(this.$route.path);
  },
  methods: {
    selectPath(path) {
      MENU.forEach((item) => {
        if (item.children.length) {
          item.children.forEach((item2) => {
            if (item2.menuUrl === path) {
              this.nowSiderId = [item2.menuId];
              this.nowOpenKeys = [item.menuId];
            }
          });
        } else {
          if (item.menuUrl === path) {
            this.nowSiderId = [item.menuId];
            this.nowOpenKeys = [];
          }
        }
      });
    },
    goPage(url){
      this.$router.push(url)
    },
  },
};
</script>

<style lang="less" scoped>
.left_page_style {
  display: flex;
  flex-direction: column;
  width: 256px;
  height: 100%;
  background-color: #001529;

  .icon_style {
    height: 70px;
    background-color: #000c17;
  }

  .menu_style {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
